<template>
	<div class="scene" :style="{'--rotatePercent': percentage}">
		<div ref="cubeRef" :class="['cube', {'transition': showtransition}]">
			<div class="face face-left" :style="{'background-image': 'url('+ bgImgs.leftImg+')'}"></div>
			<div class="face face-front" :style="{'background-image': 'url('+ bgImgs.frontImg+')'}"></div>
			<div class="face face-right" :style="{'background-image': 'url('+ bgImgs.rightImg+')'}"></div>
		</div>
	</div>
</template>

<script>
	import { reactive, toRefs, ref, onMounted } from 'vue'
	export default{
		name: 'TRollCard',
		props: {
			images: {
				type: Array,
				default: []
			}
		},
		setup(props, ctx) {
			const state = reactive({
				show: true,
				touchX: 0,
				percentage: 0,
				direction: 0,
				showtransition: false,
				index: 0,
				leftImg: '',
				bgImgs: {
					leftImg: '',
					frontImg: '',
					rightImg: '',
				}
			})
			
			const cubeRef = ref(null)
			
			onMounted(() => {
				console.dir(cubeRef)
				cubeRef.value.addEventListener('transitionend', (e) => {
				  setFaces()
				})
			})
			
			
			
			const setFaces = () => {
				let leftIndex = (state.index === 0)? 0: state.index-1
				let frontIndex = state.index
				let rightIndex = (state.index === props.images.length-1)? props.images.length-1: state.index+1
				state.showtransition = false
				state.percentage = 0
				state.leftImg = props.images[leftIndex]
				state.bgImgs = {
					leftImg: props.images[leftIndex],
					frontImg: props.images[frontIndex],
					rightImg: props.images[rightIndex],
				}
			}
			
			const turn = (direction) => {
				state.direction = direction
			  if (direction === 1) { // Left
			    state.index--
			  } else if (direction === -1) { // Right
			    state.index++
			  }
			  state.showtransition = true
			}
			
			const isSwipeTo = (direction, percentage) => {
			  if (direction === 'left') {
			    return percentage > 0
			  }
			  
			  if (direction === 'right') {
			    return percentage < 0
			  }
			}
			
			window.addEventListener('touchstart', (e) => {
				if(e.touches.length === 1){
					state.touchX = e.touches[0].clientX
				}
				e.preventDefault()
			}, {passive: false})
			window.addEventListener('touchmove', (e) => {
				if(e.touches.length === 1){
					let offset = e.touches[0].clientX - state.touchX 
					state.percentage = offset / window.innerWidth
					
					// Keep the transition works
					if (state.percentage > 0.95) state.percentage = 0.95
					if (state.percentage < -0.95) state.percentage = -0.95
					
					// Prevent move to left for first image
					if (state.index === 0 && isSwipeTo('left', state.percentage)) {
						state.percentage = 0
					}
				
					// Prevent move to right for last image
					if (state.index === props.images.length - 1 && isSwipeTo('right', state.percentage)) {
						state.percentage = 0
					}
				}
				e.preventDefault()
			}, {passive: false})
			window.addEventListener('touchend', (e) => {
				console.log('end',state.percentage)
				if(Math.abs(state.percentage) > 0.5 && Math.abs(state.percentage) <= 1){
					if(state.percentage > 0){
						state.percentage = 1
					}else{
						state.percentage = -1
					}
				}else{
					state.percentage = 0
				}
				turn(state.percentage)
				
				e.preventDefault()
			}, {passive: false})
			
			
			setFaces()
			
			return {
				...toRefs(state),
				cubeRef,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scene {
	  width: 100vw;
	  height: calc(100vh - 2rem);
		perspective: 300vw;
		
		.transition {
		  transition: transform .25s;
		}
		
		.cube{
			position: relative;
			width: inherit;
			height: inherit;
			transform: translateZ(-50vw) rotateY(calc((1 - var(--rotatePercent))* 90deg * -1));
			transform-style: preserve-3d;
			
			.face {
				position: absolute;
				top: 0;
				left: 0;
				width: inherit;
				height: inherit;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
				// border-radius: .08rem;
			}
			
			.face-left {
				transform: rotateY(0deg) translateZ(50vw);
			}
			
			.face-front {
				transform: rotateY(90deg) translateZ(50vw);
			}
			
			.face-right {
				transform: rotateY(180deg) translateZ(50vw);
			}
		}
	}
	
</style>
